<template>
  <div class="verify">
    <div class="commons_top">
      <div class="commons_back" @click="$router.go(-1)">
        <img src="@/assets/index/back.png" />
      </div>
      <span class="commons_title">验证手机</span>
    </div>
    <div class="verify_cover">
      <img src="@/assets/common/verify.png">
      <div class="verify_tip">更换手机后，下次登录可使用新手机号</div>
    </div>
    <el-form ref="phoneForm" :model="phoneForm" :rules="rules" label-position="left" label-width="65px">
      <div class="verify_list">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="phoneForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
      </div>
      <div class="verify_list">
        <el-form-item label="验证码" prop="code">
          <el-input style="width:3.4rem" v-model="phoneForm.code" placeholder="请输入验证码"></el-input>
          <span class="vefify_code" @click="getCode" v-if="getCodeStatus">发送验证码</span>
          <span class="vefify_code" v-else>{{second}}秒后可重发</span>
        </el-form-item>
      </div>
    </el-form>
    <div class="verify_btn" @click="submit('phoneForm')">提交</div>
  </div>
</template>

<script>
import '@static/css/common.css'
import { Toast } from 'mint-ui'
import { getCodeAPI, updatePhoneAPI } from '@/api/person'
let i=60;
let flag=1;

export default {
  data() {
    var phone = (rule, value, callback) => {
      let regs = /^(13\d|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18\d|19[89])\d{8}$/
      if (!value) {
        callback(new Error('请输入手机号'));
      } else if(!(regs.test(value)) || value.length > 11){
        this.ajxtrue = false
        callback('请输入正确的手机号');
      } else {
        callback()
        this.ajxtrue = true
      }
    };
    var code = (rule, value, callback) => {
      if(!value) {
        callback('请输入验证码')
      } else {
        callback()
      }
    }
    return {
      phoneForm: {
        phone: null,
        code: null
      },
      rules: {
        phone: [{validator: phone, trigger: 'change'}],
        code: [{validator: code, trigger: 'change'}]
      },
      ajxtrue: false,
      getCodeStatus:true,
      second: 60
    }
  },
  methods: {
    getCode() { //获取验证码
      if(this.ajxtrue) {
        console.log(1122)
        getCodeAPI({phone:this.phoneForm.phone}).then(res => {
          if(res.data.code === 0) {
            Toast('验证码发送成功')
            this.getCodeStatus = false
            this.countDown()
          } else {
            Toast(res.data.msg)
          }
        })
      }
    },
    countDown() {//验证码倒计时
      let that = this;
      i = i - 1;
      this.second = i
      if (i == 0) {
        this.getCodeStatus = true
        flag = 1;
        i = 60;
        return;
      }
      setTimeout(function () {
        that.countDown()
      }, 1000);
    },
    submit(formName) {
      let that = this
      this.$refs[formName].validate((valid) => {
        if(valid) {
          if(this.ajxtrue && this.phoneForm.code) {
            let data = {
              phone: this.phoneForm.phone,
              code: this.phoneForm.code
            }
            updatePhoneAPI(data).then(res => {
              if(res.data.code === 0) {
                Toast('恭喜您，手机验证成功！')
                setTimeout(function () {
                  that.$router.go(-1)
                }, 3000);
              } else {
                Toast(res.data.msg)
              }
            })
          }
        }
      })
    },
  },
}
</script>

<style>
  .verify_list .el-input__inner {
    border: none !important;
    outline: none !important;
    padding: 0 !important;
  }
  .verify_list .el-form-item {
    margin-bottom: 0 !important;
  }
  .verify_list .el-form-item__label {
    font-weight: bold;
  }
  .verify_list .el-form-item__error {
    padding-top: 9px !important;
    z-index: 10;
  }
</style>
<style scoped>
  .verify {
    width: 100%;
    height: 100vh;
  }
  .verify_cover {
    text-align: center;
    margin: 0.42rem auto 0.59rem;
  }
  .verify_cover img {
    width: 2.27rem;
    height: 2.26rem;
  }
  .verify_tip {
    color: #878B94;
    font-size: 14px;
    margin-top: 0.33rem;
  }
  .verify_list {
    padding: 0.1rem 0.3rem;
    border-bottom: 1px solid #EEEEEE;
  }
  .verify_list:last-child {
    margin-top: 0.1rem;
  }
  .vefify_code {
    padding: 0 0 0 0.3rem;
    border-left: 1px solid #eeeeee;
    color: #FF7168;
    font-size: 13px;
  }
  .verify_btn {
    margin: 0.7rem 0.75rem 0;
    height: 0.8rem;
    text-align: center;
    line-height: 0.8rem;
    background: linear-gradient(78deg, #FE8666, #FB584E);
    border-radius: 0.4rem;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
  }
</style>